<!--
  @Description:图册图片管理
  @Author:zqy
  @Date:2022-12-17 15:04:35
  @Last Modified by:zqy
  @Last Modified time:2022-12-17 15:04:35
-->
<template>
  <div class="atlas-pic-manage" :class="{'hide-tree':!showTree}">
    <div class="atals-tree">
      <AtalsTree
        ref="orgRef"
        :can-hide="true"
        @tree-show-hide="handleTiggerTree"
        @get-data="getTreeData"
        @node-click="treeNodeClick"
      />
    </div>
    <div class="pic-list">
      <table-box
        ref="refTable"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        :selected-arry.sync="tableSelected"
        :off-set="-10"
        :show-custom-collect="false"
        :show-custom-combine="false"
        :show-custom-setting="false"
        :setting-auto-request="false"
        show-selection
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @btnOperate="btnOperate"
      />
      <edit-form
        v-if="showEdit"
        ref="formDlg"
        :visible.sync="showEdit"
        :detail-data="detailData"
        @refreshTable="refreshTable"
      />
    </div>
  </div>
</template>
<script>
import EditForm from './EditForm'
import AtalsTree from './AtalsTree'
import { deleteAtlaspic, zipAtlaspic, deleteBatchAtlaspic } from '@/api/shopauxPlat/atlaspicManagement'
export default {
  components: { EditForm, AtalsTree },
  data() {
    return {
      showEdit: false,
      otherFilters: [],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/atlasDetail/page`,
        // hideSearchBar: true,
        pageSize: 20,
        sort: '',
        order: 'desc',
        setting: [
          {
            prop: 'fileName',
            label: '主图名称',
            minWidth: 130
          },
          {
            prop: 'bigUrl',
            label: '缩略大图',
            isImage: true,
            minWidth: 130
          },
          {
            prop: 'smallUrl',
            label: '缩略小图',
            isImage: true,
            minWidth: 130
          },
          {
            prop: 'state',
            label: '状态',
            minWidth: 100,
            formatData: function({ state }) { return state === 1 ? '正常' : '压缩中' }
          },
          {
            prop: 'atlasDetailName',
            label: '所属图册',
            minWidth: 280
          },
          {
            prop: 'isZip',
            label: '是否压缩',
            width: 100,
            formatData: function({ isZip }) { return isZip === 1 ? '是' : '否' }
          },
          {
            prop: 'zipDate',
            label: '压缩时间',
            width: 150
          },
          {
            prop: 'zipInfo',
            label: '压缩信息',
            width: 130
          },
          {
            prop: 'lastUpdateBy',
            label: '修改人',
            width: 130
          },
          {
            prop: 'lastUpdateTime',
            label: '最后修改时间',
            width: 150
          }
        ],
        btnList: !this.isProduction ? [
          {
            buttonName: '新增',
            optCode: 'add',
            outerFlag: true
          }, {
            buttonName: '编辑',
            optCode: 'edit',
            outerFlag: true
          }, {
            buttonName: '删除',
            optCode: 'del',
            outerFlag: true
          }, {
            buttonName: '手动压缩',
            optCode: 'zip',
            outerFlag: true
          }
        ] : null
      },
      tableSelected: [],
      detailData: '',
      showTree: true // 是否显示树形
    }
  },
  created() {
  },
  methods: {
    handleSelectionChange(rows) {
      this.tableSelected = rows
    },
    handleRowClick({ row }) {
      this.$refs.refTable.clearSelection()
      this.$refs.refTable.toggleRowSelection(row, true)
    },
    refreshTable(isInit) {
      this.$nextTick(() => {
        this.$refs.refTable.initTableData(isInit ? '' : 'onPage')
      })
    },
    btnOperate(code) {
      switch (code) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'zip':
          if (!this.singleJudge(this.tableSelected, '压缩', true)) {
            return
          }
          this.handleZip(this.tableSelected[0])
          break
        case 'del':
          if (!this.singleJudge(this.tableSelected, '删除', false)) {
            return
          }
          // this.handleDelete(this.tableSelected[0])
          this.handleBatchDelete()
          break
      }
    },
    // 新增/编辑
    handleEdit(row) {
      this.detailData = (row && row.id) ? row : ''
      this.$nextTick(() => {
        this.showEdit = true
      })
    },
    // 删除
    handleDelete(row) {
      const { id, fileName } = row
      this.$confirm(`确认删除图片【${fileName}】吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAtlaspic(id).then(res => {
          if (res.success === 1) {
            this.$message.success('删除成功')
            this.refreshTable()
          }
        })
      })
    },
    // 批量删除
    handleBatchDelete() {
      this.$confirm(`确认删除当前所选图片吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.tableSelected.map(v => v.id)
        deleteBatchAtlaspic(ids).then(res => {
          if (res.success === 1) {
            this.$message.success('删除成功')
            this.refreshTable()
          }
        })
      })
    },
    handleZip(row) {
      if (row.isZip === 1) {
        this.$message.warning('只能操作压缩状态为"否"的图片')
        return
      }
      zipAtlaspic(row.id).then(res => {
        if (res.success === 1) {
          this.$message.success('压缩成功')
          this.refreshTable()
        }
      })
    },
    getTreeData(data) {
      // console.log('图册数据',data)
    },
    handleTiggerTree(flag) {
      this.showTree = flag
    },
    treeNodeClick(data) {
      if (data.id) {
        this.otherFilters = [
          { id: 'atlasId', property: 'atlasId', value: data.id, operator: '=' }
        ]
        this.refreshTable(true)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.atlas-pic-manage{
  position: relative;
  height: 100%;
  padding-left: 252px !important;
  box-sizing: border-box;
  &.hide-tree{
    padding-left:12px !important;
    /deep/ .treemenu-open{
      left: -10px;
    }
  }
  .atals-tree{
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    z-index: 9;
  }
  .pic-list{
    position: relative;
    height: 100%;
  }
}
</style>

